<template>  
    <view v-if="prodata" class="recom">  
        <view v-for="(val,index) in prodata" :key="index" class="zj" :style="{width:blockWidth}"  
            @tap="goUrl('../info/info')">  
            <view class="imgSpan">  
                <image class="img" v-if="val.src" :src="val.src" mode='widthFix'></image>  
                <image class="icon" v-if="imgSrc" :src="imgSrc+'icons/start_blank.png'" mode='widthFix'></image>  
                <view v-if="val.count" class="listenCount">  
                    <image v-if="imgSrc" :src="imgSrc+'icons/music.png'"></image>  
                    {{playCount(val.count)}}  
                </view>  
            </view>  
            <view v-if="val.name" class="name">{{val.name}}</view>  
            <view v-if="val.author" class="author">{{val.author}}</view>  
        </view>  
    </view>  
</template>  
  
<script>  
    export default {  
        name: "album",  
        props: {  
            prodata: {  
                type: Array,  
                default: []  
            },  
            blockWidth: {  
                type: String,  
                default: '32.8%'  
            }  
        },  
        data() {  
            return {  
                imgSrc: '../static/image/',  
            };  
        },  
        methods: {  
            goUrl: function(str) {  
                uni.navigateTo({  
                    url: str  
                });  
            },  
            playCount:function(val){  
                return this.$PubFn.peoNum(val)  
            }  
        }  
    }  
</script>  
  
<style lang="scss" scoped>  
    .recom {  
        display: flex;  
        justify-content: space-between;  
        flex-wrap: wrap;  
        width: 100%;  
        .zj {  
            margin-bottom: 30upx;  
            .imgSpan {  
                position: relative;  
                .img {  
                    display: block;  
                    width: 100%;  
                }  
                .icon {  
                    position: absolute;  
                    z-index: 1;  
                    right: 10upx;  
                    bottom: 10upx;  
                    width: 40upx;  
                    opacity: .9;  
                }  
  
                .listenCount {  
                    position: absolute;  
                    left: 10upx;  
                    bottom: 10upx;  
                    color: rgba(255, 255, 255, .8);  
                    font-size: 20upx;  
                    image {  
                        width: 28upx;  
                        height: 32upx;  
                        margin-right: 6upx;  
                        display: inline-block;  
                        vertical-align: text-bottom;  
                    }  
                }  
            }  
        }  
        .name,  
        .author {  
            padding: 0 6upx;  
            font-size: 26upx;  
        }  
        .author {  
            color: #999999;  
        }  
    }  
</style>  
